<template>
  <div class="Cart">

    <!-- 
      购物车功能总结：
      1、进入购物车页面进行渲染（产品列表，勾选列表，全选按钮）
      2、全选/全不选的联动 （点击每一项商品，点击全选按钮）
      3、进入编辑状态（编辑状态的切换靠isEditing来完成）
      4、删除商品（布局和删除请求，删除到为空时候的处理）
    -->

    <!-- 顶部 -->
    <Tips />

    <!-- 商品列表 -->
    <van-checkbox-group v-model="result" :class="{'paddingBottom150':cartList.length>4 } ">
      <!-- name属性需要每个都不一样  不然一勾就全选了 -->
      <van-checkbox :name="item.id"  v-for="item in cartList" :key="item.id" @click="goodsItemClick(item)" :disabled="isEdit">
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <van-stepper v-model="item.number" min="1" max="9999" v-show="isEdit" @change="changeNum(item)"/>
           <template #right>
            <van-button square type="danger" text="删除" class="delete-button" @click="delGoods(item)" />
          </template>
        </van-swipe-cell>
      </van-checkbox>
      <div v-if="this.cartList.length==0" class="noList">
        暂无商品
      </div>
    </van-checkbox-group>
    

    <!-- 提交栏 -->
    <!-- 注意这里的price单位是分，也即写 100 = 1元 -->
    <van-submit-bar :price="(cartTotal.checkedGoodsAmount)*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="isCheckedAll" :disabled="isEdit || this.cartList.length==0">全选</van-checkbox>
      <template #tip>
         累计共{{cartTotal.goodsCount}}件商品,可点击 <van-button :type="isEdit?'danger':'primary'" size="mini" @click="isEdit = !isEdit">{{isEdit?'完成编辑':'编辑'}}</van-button> 按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Vue from "vue";

// 请求api相关
import { getCartData } from "@/request/detailApi";
import { chanGoodsChecked,septNum,delGoods } from "@/request/cartApi";

// 组件相关
import Tips from "@/components/common/Tips.vue";
export default {
  components: {
    Tips,
  },
  data() {
    return {
      result: [], // van-checkbox-group的选中项name（这里的name我们是给了商品的id）集合，哪个checkbox被选中的就 放那个checkbox的name值进去
      cartList: [],  // 购物车商品列表数据
      cartTotal:[],   // 购物车汇总的数据
      isEdit: false  //是不是正在编辑
    };
  },
  computed:{
    isCheckedAll:{
      get(){
        // 长度相同 并且长度不为0
        return this.cartList.length == this.result.length && this.cartList.length!=0
      },
      set(val){
        // 获取val
        //console.log(val) //val就是要修改成的值

        if(this.isEdit){
          return
        }

        // 发起 全选/全不选 请求
        chanGoodsChecked({
          isChecked: val ? 1 : 0,  
          productIds: this.cartList.map(item => item.product_id).join(',')
        }).then(res=>{
          // 渲染数据
          this.renderData(res.data)
        })
      }
      
    }
  },
  created() {
    getCartData().then((res) => {
      this.renderData(res.data)
    });
  },
  methods:{
    // 点击每一项商品，改变选中状态
    goodsItemClick(item){

      if(this.isEdit){ //编辑状态下不可点击
        return
      }

      chanGoodsChecked({
        isChecked: item.checked==1 ? 0 : 1,  //如果是1就改成0 反之
        productIds: item.product_id
      }).then(res=>{
        // 请求成功会返回新的列表数据和汇总数据，需要重新渲染
        this.renderData(res.data)
      })
    },
    // 数据渲染方法抽取
    renderData(data){
      let { cartList, cartTotal } = data;
      // 列表数据
      this.cartList = cartList;
      this.cartTotal = cartTotal;

      //每次渲染数据前result需要清空，不然不会一直加数据进去，会影响checkedAll等数据
      this.result = []  
      // 渲染产品列表每一项是否被选中
      this.cartList.forEach(item=>{
        // 数据中被选中的项，都要把它id放进去
        item.checked ? this.result.push(item.id):''
      })
    },
    // 步进器数量改变
    changeNum(item){
      septNum({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id
      }).then(res=>{
        this.renderData(res.data)
      })
    },
    // 删除商品
    delGoods(item){
      delGoods({
        productIds: item.product_id.toString()
      }).then(res=>{
        this.renderData(res.data)
      })
    },
    // 提交订单
    onSubmit(values){

    }
  },
  // 组件内导航守卫
  // 在这里判断是否有登陆然后进行跳转比在全局会更好，不用每次路由跳转都会判断，节省资源
  beforeRouteEnter(to, from, next) {
    // 这里不能直接使用this
    // 因为当守卫执行前，组件实例还没被创建
    let token = localStorage.getItem("token");
    if (token) {
      //已登录直接跳转
      next();
    } else {
      Vue.prototype.$toast("请先登录");
      // 定时器
      setTimeout(() => {
        next("/user"); // 强制去到"/user"所对应的路由界面
      }, 1000);

      return;
    }
  },
};
</script>

<style lang='less' scoped>
.van-checkbox-group {
  padding: .1rem;
  background-color: #fff;

  .van-checkbox {
    border-bottom: 1px solid #ccc;
    padding-bottom: .1rem;
  }

  /deep/.van-checkbox__label {
    flex: 1;
  }
}
.van-submit-bar {
  bottom: 0.5rem;
}
.van-submit-bar__tip {
  display: flex;
  align-items: center;
  .van-button {
    margin: 0 0.08rem;
  }
}

.van-card__title{
  font-size: 0.18rem;
  line-height: 0.24rem;
  max-height: 0.5rem;
}
.van-stepper{
  text-align: right;
}
.delete-button{
  height: 100%;
}
.paddingBottom150{
  padding-bottom: 1.5rem;
}

.noList{
  color: #c8c9cc;
  text-align: center;
}
</style>
